<template>
  <el-dialog
    :title="id? '修改工作模式' : '新增工作模式'"
    :visible.sync="dialogVisible"
    width="40%"
    center
  >
    <div class="tab-bar">
      <div
        v-for="(item, index) in title"
        :key="item"
        class="title"
        :class="{ active: currentIndex === index }"
        @click="changeTab(index)"
      >{{ item }}</div>
    </div>
    <div class="form">
      <el-form
        v-if="currentIndex === 0"
        ref="weekForm"
        :model="weekForm"
        :rules="weekFormRules"
      >
        <el-form-item
          label="工作模式名称"
          prop="name"
          label-width="110px"
        >
          <el-input v-model="weekForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="连续工作天数"
          prop="type"
          label-width="110px"
        >
          <el-checkbox-group v-model="weekForm.type">
            <el-checkbox
              label="周一"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="周二"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="周三"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="周四"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="周五"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="周六"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="周日"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label-width="110px">
          <div style="color: #ccc">选中为工作时间, 未选中为休息时间</div>
        </el-form-item>
        <el-form-item
          label="工作时间"
          prop="time"
          label-width="110px"
        >
          <el-time-picker
            v-model="weekForm.time"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            format="HH:mm"
            value-format="mm"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <el-form
        v-else
        ref="contForm"
        :model="contForm"
        :rules="contFormRules"
      >
        <el-form-item
          label="工作模式名称"
          prop="name"
          label-width="110px"
        >
          <el-input v-model="contForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="连续工作天数"
          prop="workDayNum"
          label-width="110px"
        >
          <el-input v-model="contForm.workDayNum">
            <i
              slot="suffix"
              style="font-style: normal; color: black"
            >天</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="休息天数"
          prop="restDayNum"
          label-width="110px"
        >
          <el-input v-model="contForm.restDayNum">
            <i
              slot="suffix"
              style="font-style: normal; color: black"
            >天</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="工作时间"
          prop="time"
          label-width="110px"
        >
          <el-time-picker
            v-model="contForm.time"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            format="HH:mm"
            value-format="mm"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
    </div>
    <span
      v-if="currentIndex === 0"
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="closeWeekDialog">取 消</el-button>
      <el-button
        type="warning"
        @click="submitWeekForm"
      >确 定</el-button>
    </span>
    <span
      v-if="currentIndex === 1"
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="closeContDialog">取 消</el-button>
      <el-button
        type="warning"
        @click="submitContForm"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addWorkHistory, workHistoryInfo, updateWorkHistory } from '@/api/transit'
export default {
  data() {
    return {
      id: null,
      dialogVisible: false, // 开关
      title: ['礼拜制', '连续制'],
      currentIndex: 0,

      // 礼拜制表单
      weekForm: {
        workPatternType: 1, // 工作模式
        name: '', // 名称
        type: [], // 连续工作天数
        workStartMinute1: null, // 开始时间
        workEndMinute1: null, // 结束时间
        monday: 2, // 周一
        tuesday: 2, // 周二
        wednesday: 2, // 周三
        thursday: 2, // 周四
        friday: 2, // 周五
        saturday: 2, // 周六
        sunday: 2, // 周日
        time: []
      },
      // 礼拜制表单规则
      weekFormRules: {
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一天', trigger: 'change' }
        ],
        time: [
          { type: 'array', required: true, message: '请选择工作时间', trigger: 'change' }
        ]
      },
      // 连续制表单
      contForm: {
        workPatternType: 2,
        name: '', // 工作模式名称
        workDayNum: '', // 连续工作天数
        restDayNum: '', // 休息天数
        time: [],
        workStartMinute1: null, // 开始时间
        workEndMinute1: null // 结束时间
      },
      contFormRules: {
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' }
        ],
        time: [
          { type: 'array', required: true, message: '请选择工作时间', trigger: 'change' }
        ],
        workDayNum: [
          { required: true, message: '请输入连续工作天数', trigger: 'blur' }
        ],
        restDayNum: [
          { required: true, message: '请输入休息天数', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    async dialogVisible(newValue, oldValue) {
      if (this.id) {
        if (newValue) {
          const res = await workHistoryInfo(this.id)
          console.log(res)
          if (res.data.workPatternType === 1) {
            // 礼拜制
            this.currentIndex = 0
            this.weekForm = res.data
          } else if (res.data.workPatternType === 2) {
            // 连续制
            this.currentIndex = 1
            this.contForm = res.data
          }
        }
      }
    }
  },
  methods: {
    // tab切换
    changeTab(index) {
      this.currentIndex = index
    },
    // 关闭周弹框
    closeWeekDialog() {
      // 清空表单和验证信息
      this.weekForm = {
        workPatternType: 1, // 工作模式
        name: '', // 名称
        type: [], // 连续工作天数
        workStartMinute1: null, // 开始时间
        workEndMinute1: null, // 结束时间
        monday: 2, // 周一
        tuesday: 2, // 周二
        wednesday: 2, // 周三
        thursday: 2, // 周四
        friday: 2, // 周五
        saturday: 2, // 周六
        sunday: 2, // 周日
        time: []
      }
      this.$refs.weekForm.resetFields()
      this.id = ''
      // 关闭
      this.dialogVisible = false
    },
    // 关闭连续弹框
    closeContDialog() {
      this.contForm = {
        name: '', // 工作模式名称
        workDayNum: '', // 连续工作天数
        restDayNum: '', // 休息天数
        time: [],
        workStartMinute1: null, // 开始时间
        workEndMinute1: null // 结束时间
      }
      this.id = ''
      this.$refs.contForm.resetFields()
      this.dialogVisible = false
    },
    // 提交礼拜制表单
    submitWeekForm() {
      this.$refs.weekForm.validate(async valid => {
        if (valid) {
          // 通过验证后的逻辑
          // 处理工作天数
          this.getWorkDay()
          // 处理工作时间
          this.weekForm.workStartMinute1 = this.weekForm.time[0]
          this.weekForm.workEndMinute1 = this.weekForm.time[1]
          // 调用接口
          await addWorkHistory(this.weekForm)
          this.$message.success('添加成功')
          // 关闭弹框
          this.closeWeekDialog()
          // 重新拉取列表
          this.$emit('getList')
        }
      })
    },
    // 提交连续制表单
    submitContForm() {
      this.$refs.contForm.validate(async valid => {
        if (valid) {
          // 校验通过后的逻辑
          this.contForm.workStartMinute1 = this.contForm.time[0]
          this.contForm.workEndMinute1 = this.contForm.time[1]
          if (this.id) {
          // 编辑
            await updateWorkHistory(this.contForm)
          } else {
          // 添加
            await addWorkHistory(this.contForm)
          }
          this.$message.success(`${this.id ? '修改成功' : '添加成功'}`)
          this.closeContDialog()
          this.$emit('getList')
        }
      })
    },
    // 处理工作天数
    getWorkDay() {
      if (this.weekForm.type.includes('周一')) {
        this.weekForm.monday = 1
      }
      if (this.weekForm.type.includes('周二')) {
        this.weekForm.tuesday = 1
      }
      if (this.weekForm.type.includes('周三')) {
        this.weekForm.wednesday = 1
      }
      if (this.weekForm.type.includes('周四')) {
        this.weekForm.thursday = 1
      }
      if (this.weekForm.type.includes('周五')) {
        this.weekForm.friday = 1
      }
      if (this.weekForm.type.includes('周六')) {
        this.weekForm.saturday = 1
      }
      if (this.weekForm.type.includes('周日')) {
        this.weekForm.sunday = 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  .tab-bar {
    margin: 0 20px;
    margin-top: 20px;
    display: flex;
    border-bottom: 1px solid #ccc;

    .title {
      margin-right: 20px;
      padding-bottom: 15px;
      cursor: pointer;
    }

    .active {
      color: black;
      border-bottom: 3px solid #e15536;
    }
  }

  .form {
    margin-top: 20px;

    .wrok-day {
      display: flex;

      .el-input {
        width: 100px;
      }
    }
  }
}
</style>
